﻿<h2>@Model.Name</h2>

<h3>Checkbox list</h3>
@* Check if something is filled in before rendering anything *@
@if (Model.HasValue("checkboxes"))
{
    <ul>
        @foreach (var item in Model.checkboxes.Split(','))
        {
            <li>@item</li>
        }
    </ul>
}

<h3>Content picker</h3>
@if (Model.HasValue("otherPage"))
{
    @* 
        Introducing a variable here as i'm going to use
        the result of the NodeById operation multiple times.
    *@        
    var otherPage = Model.NodeById(Model.otherPage);
    <p>Link to some other page: <a href="@otherPage.Url">@otherPage.Name</a>.</p>
}

<h3>Date picker with time</h3>
@if (Model.HasValue("publishDateTime")) {
    var published = Model.publishDateTime;

    @* This is a codeblock that contains multiple lines. If you're in a codeblock 
        and want to output some text that is not surrounded by an HTML tag, you 
        eed a way of telling the Razor enginge that. This is where the <text> tag 
        comes in. It will not show up in the page output. *@
    <text>Raw date / time: </text> @published<br />
    <text>Formated date / time: </text> @(String.Format("{0:dddd MMMM dd yyyy} at {0: HH:mm:ss}", published))<br />
    
    var duration = published - DateTime.Now;
    <text>How long?</text> @(string.Format("{0} days, {1} hours, {2} minutes, {3} seconds", duration.Days, duration.Hours, duration.Minutes, duration.Seconds))
}

<h3>Dropdown multiple</h3>
@* This is the same sort of output as I had for the checkbox list
    and I want to render it the same as well, now it's time to introduce
    an @helper method that can do that for future lists as well.     
    Using GetPropertyValue as that will always return a 
    string with the contents of the requested property. *@
@RenderTokenSeperatedList(Model.GetPropertyValue("multiList"), ',')

@helper RenderTokenSeperatedList(dynamic values, char token)
{
    if (values == string.Empty)
    {
        @* There are no values! Carry on.. *@
        return;
    }
    var tokenSeperatedList = values.Split(token);
    <ul>
        @foreach (var item in tokenSeperatedList)
        {
            <li>@item</li>
        }
    </ul>
}

<h3>Image cropper</h3>
@* The cropper stores some XML and  here we're going to find the lines
    with the attributed called name of Thumbnail and Header. *@
@if (Model.HasValue("cropper"))
{
    <img src="@Model.cropper.Find("@name", "Thumbnail").url" /><br />
    <img src="@Model.cropper.Find("@name", "Header").url" />
}

<h3>Media Picker</h3>
@if (Model.GetPropertyValue("mediaItem") != string.Empty)
{
    @* As of 4.7.1, there's a more obvious method for this: Library.MediaById(Model.mediaItem) *@
    var mediaItem = Model.MediaById(Model.mediaItem);

    <text>Name: </text> @mediaItem.Name<br />
    <text>Url: </text> <a href="@mediaItem.Url">@mediaItem.Url</a><br />

    @* 
        For the thumbnail you need to put _thumb in front of the last ".", which
        you can do easily because the file extension is saved in the media item.
    *@
    <text>Thumbnail:</text><br />
    <img src="@(mediaItem.Url.Replace("." + mediaItem.Type, "_thumb." + mediaItem.Type))" alt="@mediaItem.Name" />
}

<h3>Member picker</h3>
@if (Model.HasValue("member"))
{
    
    var member = new umbraco.cms.businesslogic.member.Member(Model.member);
    var userName = member.LoginName;
    var email = member.Email;
    var twitter = member.getProperty("twitter").Value;

    <text>Username: </text> @userName<br />
    <text>Email: </text> @email<br />
    <text>Twitter: </text> @twitter
}

<h3>Number</h3>
@if (Model.HasValue("number"))
{
    @Model.number
}
 
<h3>Radiobox</h3>
@if (Model.HasValue("radios"))
{
    @* The Radiobox datatype stores the selected prevalue ID, 
    but we're interested in the selected value, so we'll reach
    out to umbraco's library and find the appropriate function. *@
    @umbraco.library.GetPreValueAsString(Model.radios) <text>(id: @Model.radios)</text>
}
 
<h3>Related links</h3>
@* 
    This datatype stores a bit of XML, even if left empty, so it 
    requires a different check to see if something can be rendered.
*@
@if (Model.links.Count() != 0)
{
    <ul>
        @foreach(var item in Model.links)
        {
            var target = item.newwindow == "1" ? "target=\"_blank\"" : "";
            <li>
                @* The href is built differently for internal and external links *@
                @{
                    string type = item.type;
                    switch (type)
                    {
                        case "internal":
                            <a href="@Model.NodeById(item.link).Url" @target>@item.title</a>
                            break; 
                        case "external":
                            <a href="@item.link" @target>@item.title</a>
                            break;
                    }
                }
            </li>
        }
    </ul>
}

<h3>Rich text editor</h3>
@Model.BodyText

<h3>Simple text editor</h3>
@* 
    Unlike the RTE datatype above, the simple editor doesn't automatically output
    HTML, so you first have to tell it to output the raw HTML.
*@
@Html.Raw(Model.SimpleText)

<h3>Tags</h3>
@* Cool, re-using the helper we created earlier! *@
@RenderTokenSeperatedList(Model.tagging, ',')

<h3>Textbox multiple</h3>
@Model.bigText

<h3>Textstring</h3>
@Model.littleText

<h3>True/False</h3>
@Model.aBoolean

<h3>Ultimate picker</h3>
@if(Model.HasValue("greatPickings"))
{
    var page = Model.NodeById(Model.greatPickings);
    <a href="@page.Url">@page.Name</a>
}

<h3>Upload</h3>
@if(Model.HasValue("umbracoFile"))
{
    var file = Model.umbracoFile;
    <a href="@file">@file</a>
}
